<template>
  
   <view class="music-box" style="height: 100%;">
    
    <my-music-play></my-music-play>
     
     <view class="music-item"  >
       <!-- 歌曲图片区 -->
       <view class="music-pic">
         <image src="/static/555.webp"  mode=""></image>
       </view>
   
       <!-- 歌名 歌手-->
       <view class="music-name">
         <p>理想三旬</p>
         <text>陈鸿宇</text>
       </view>
   
       <!-- 歌词 -->
       <scroll-view scroll-y="true">
         <view class="music-txt">
           <p>作词 : 唐映枫</p>
           <p>作曲 : 陈鸿宇</p>
           <p>编曲 : 陈鸿宇/马雨阳 </p>
           <p>混音：马雨阳 </p>
           <p>雨后有车驶来</p>
           <p>驶过暮色苍白</p>
           <p>旧铁皮往南开 恋人已不在</p>
           <p>收听浓烟下的 诗歌电台</p>
           <p>不动情的咳嗽 至少看起来</p>
           <p>归途也还可爱 </p>
           <p>琴弦少了姿态</p>
           <p>再不见那夜里 听歌的小孩</p>
           <p>时光匆匆独白 </p>
           <p>将颠沛磨成卡带</p>
           <p>已枯卷的情怀 踏碎成年代</p>
           <p>就老去吧 孤独别醒来</p>
           <p>你渴望的离开</p>
           <p>只是无处停摆</p>
           <p>就歌唱吧 眼睛眯起来</p>
           <p>而热泪的崩坏</p>
           <p>只是没抵达的存在</p>
           <p>青春又醉倒在</p>
           <p>籍籍无名的怀</p>
           <p>靠嬉笑来虚度 聚散得慷慨</p>
           <p>辗转却去不到 对的站台</p>
           <p>如果漂泊是成长 必经的路牌</p>
           <p>你迷醒岁月中</p>
           <p>那贫瘠的未来</p>
           <p>像遗憾季节里 未结果的爱</p>
           <p>弄脏了每一页诗</p>
           <p>吻最疼痛的告白</p>
           <p>而风声吹到这 已不需要释怀</p>
           <p>就老去吧 孤独别醒来</p>
   
         </view>
       </scroll-view>
   
       <!-- 播放进度条 -->
       <view class="music-progress">
         <slider class="slider" block-size="12px" max="256" ></slider>
         <view class="music-time">
           <text class="music-start">00:00</text>
           <text class="music-end">04:16</text>
         </view>
       </view>
   
       <!-- 播放 和 切换 -->
       <view class="music-change">
         <!-- 循环按钮 -->
         <view class="iconfont icon-suijibofang"></view>
         <!-- 随机按钮 -->
         <view class="iconfont icon-suijisenlin" style="display: none;"></view>
         <view class="iconfont icon-yduishangyiqu"></view>
         <view class="iconfont icon-bofang_o"></view>
         <view class="iconfont icon-icon-zanting2" style="display: none;"></view>
         <view class="iconfont icon-yduixiayiqu"></view>
         <view class="iconfont icon-24gf-playlistMusic5"></view>
       </view>
   
   
     </view>
   </view>
 
</template>

<script>
  export default {
    data() {
      return {
       
      };
    },
     // onShow: function() {
     //    wx.hideHomeButton();  //隐藏home/返回主页按钮
     //  },
     methods:{
       changeText(){
         uni.navigateTo({
           url:'./music-txt/music-txt'
         })
       }
     }
  }
</script>

<style lang="scss">
  body{
    height: 100%;
  }
  .music-box{
    color: #fff;
    width:100%;
    heigth:100%;
    position:relative;
    overflow:hidden;
    
    
    
    
    .music-item{
      padding: 0 60rpx;
      height: 100%;
    
      .music-pic{
         position: relative;
         height: 650rpx;
        margin-top: 30rpx;
        image{
         width: 100%;
         height: 600rpx;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          
        }
      }
  
    .music-name{
      p{
        font-size: 45rpx;
        font-weight: 700;
      }
      text{
        font-size: 30rpx;
      }
    }
    
    scroll-view{
      height: 35rpx;
      margin-top: 20rpx;
      .music-txt{
        font-size: 26rpx;
        p{
          text-align: center;
        }
        
      }
    }
  
  .music-progress{
    .slider{
      width:630rpx;
      margin: 24rpx 0 0 0;
   
    }
    .music-time{
      font-size: 24rpx;
      display: flex;
      justify-content: space-between;
      
    }
  }
    
    
    .music-change{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 36rpx 0;
      .iconfont {
        font-size: 66rpx;
      }
      .icon-bofang_o{
        font-size:125rpx;
      }
      .icon-24gf-playlistMusic5{
        font-size: 52rpx;
      }
    }
  }
  
  }
    
  
</style>
